<template>
  <div class="repass">
    <van-nav-bar title="修改密码" left-text="返回" left-arrow @click-left="onClickLeft" fixed />
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="oldPassword"
          type="password"
          name="密码"
          label="原密码"
          placeholder="请输入原密码"
          :rules="[{ required: true, message: '请填写原密码' }]"
        />
        <van-field
          v-model="newPassword"
          type="password"
          name="密码"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="确认密码"
          placeholder="请再次输入新密码"
          :rules="[{ required: true, message: '请再次填写新密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      password: "",
      newPassword: "",
      oldPassword: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit() {
      let paramForm = {
        oldPassword: this.oldPassword,
        newPassword: this.newPassword
      };
      this.$axios
        .put(
          "prod-api/app/personal/updatePassword/" +
            paramForm.oldPassword +
            "/" +
            paramForm.newPassword,
          paramForm
        )
        .then(res => {
          if (200 == res.data.code) {
            this.$router.go(-1);
            this.$toast.fail(res.data.msg);
          } else {
            this.$toast.fail(res.data.msg);
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  padding-top: 50px;
}
.repass {
  position: relative;
}
.van-nav-bar {
  background: url("../assets/bg2.png");
}
</style>